<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>耕地质量</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
   <div class="qualityContent">
       <ul class="Grade_itme">
           <li class="activeNav">等级一</li>
           <li>等级二</li>
           <li>等级三</li>
           <li>等级四</li>
       </ul>
       <div class="chart">
           <div id="main" style="width: 100%;height:400px;"></div>
           <div id="mainBar" style="width: 100%;height: 400px"></div>
       </div>
   </div>

<script src="../js/method/jquery.2.1.1min.js"></script>
<script src="../js/method/fastclick.js"></script>
<script src="../js/method/axios.min.js"></script>
<script src="../js/function.js"></script>
<script src="../js/public.js"></script>
<script src="../js/method/echarts.js"></script>
<script>
    $(function () {
        postAxios('',{},dataObj);
        var pieData,barData;
        function dataObj(data){
            // console.log(data);
            barData=pieData=data;
        }
        $(".Grade_itme").on("click","li",function () {
            $(this).addClass("activeNav").siblings().removeClass("activeNav")
        });
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title : {
                text: '耕地等级',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    // data:pieData,
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1000, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        var myChartBar=echarts.init(document.getElementById('mainBar'));
        optionBar = {
            tooltip : {
                trigger: 'axis'
            },
            // legend: {
            //     data:['降水量']
            // },
            toolbox: {
                show : true,
                feature : {
                    // mark : {show: true},
                    // dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    // saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'降水量',
                    type:'bar',
                    // data:barData,
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0]
                }
            ]
        };
        myChartBar.setOption(optionBar)
    });
</script>
</body>
</html>